<template>
  <div class="box">
    <div class="header">
      <van-nav-bar left-arrow @click-left="onClickLeft" />
      <p>又一宝藏功能上线了！你有20万豪礼待领取！</p>
    </div>
    <div class="main">
      <div class="mainBox">
        <p class="headline">又一宝藏功能上线了！你有20万豪礼待领取！</p>
        <span class="mainLeft">mrwish平台服务号</span>
        <span class="mainRight">2022-06-29 17：50</span>
        <div class="mainImg"></div>
      </div>
    </div>
    <div class="footer">
      <van-icon name="arrow-left" class="c" />
      <van-icon name="arrow" class="c" />
    </div>
  </div>
</template>
<script>
export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};
</script>
<style scoped>
.box {
  height: 667.2px;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: rgba(248, 248, 248, 100);
  position: relative;
}
.header .b {
  margin-left: 9px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
}
.header p {
  width: 232px;
  height: 26px;
  color: rgba(16, 16, 16, 100);
  font-size: 18px;
  font-family: SourceHanSansSC-regular;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main {
  flex: 1;
}
.mainBox {
  width: 324px;
  margin: auto;
}
.headline {
  color: rgba(16, 16, 16, 100);
  font-size: 20px;
  font-family: SourceHanSansSC-regular;
}
.mainLeft {
  color: rgba(154, 154, 154, 100);
  font-size: 14px;
  font-family: SourceHanSansSC-regular;
}
.mainRight {
  color: rgba(154, 154, 154, 100);
  font-size: 14px;
  margin-left: 20px;
  font-family: SourceHanSansSC-regular;
}
.mainImg {
  width: 324px;
  height: 538px;
  background-color: #cecece;
  margin-top: 15px;
}
.footer {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgba(248, 248, 248, 100);
}
.footer .c {
  background-color: rgba(248, 248, 248, 100);
}
</style>
